<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
    <style type="text/css">
  /* 父元素：背景图片、尺寸、对齐 */
  #ph {
    width: 300px;
    height: 300px;
    background-image:url(images/time.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 50px auto; /* 居中整个区域 */
  }

  /* 子元素：水平垂直居中 */
  #abc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
  }
</style>
</head>
<body>

<div id="ph">
  <div id="abc">--:--:--</div>
</div>

<script>
  const childDiv = document.getElementById('abc');
  function getCurrentTime() {
    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    function formatNum(num) {
      return num < 10 ? '0' + num : num;
    }
    let timeStr = `${formatNum(hours)}:${formatNum(minutes)}:${formatNum(seconds)}`;
    return timeStr;
  }
	
  setInterval(() => {
    childDiv.textContent = getCurrentTime();
  }, 1000);

  childDiv.textContent = getCurrentTime();
  setInterval(() => {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    childDiv.style.color = `rgb(${r}, ${g}, ${b})`;
  }, 500);
</script>
</body>
</html>

